<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;" :title="dialogTitle">{{dialogTitle}}</span>
  </div>
  <el-card style="margin: 20px auto;width: 1000px;">
    <el-form label-width="80px" label-position="right">
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="楼座">
            <el-input placeholder="请输入楼座" v-model="saveHouse.bname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="单元">
            <el-input placeholder="请输入单元" v-model="saveHouse.hunit"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="房间号">
            <el-input placeholder="请输入房间号" v-model="saveHouse.hnum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="房屋状态">
            <el-select placeholder="请选择房屋状态" v-model="saveHouse.hstatus">
              <el-option label="自住" value="10"></el-option>
              <el-option label="商用" value="20"></el-option>
              <el-option label="出租" value="30"></el-option>
              <el-option label="闲置" value="40"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="房屋用途">
            <el-input placeholder="请输入房屋用途" v-model="saveHouse.huse"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="实用面积">
            <el-input placeholder="请输入实用面积" v-model="saveHouse.harea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="户型">
            <el-input placeholder="请输入户型" v-model="saveHouse.htype"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="2"></el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="returnHouse">返回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
  import router from "@/router";
  import axios from "axios";
  import {ElMessage} from "element-plus";
  import qs from "qs";
  //获取传递的id值
  const dialogId = new URLSearchParams(window.location.search).get('hid');

  console.log(dialogId);

  const dialogTitle = ref('新建房屋');
  //判断传递的id是否为空
  if (dialogId != '[object PointerEvent]'){
    dialogTitle.value = '编辑房屋';
    onMounted(()=>{
      loadHouse();
    })
  }

  //保存房屋表单内容
  const saveHouse = ref({
    bname: '',
    hunit: '',
    hnum: '',
    hstatus: '',
    huse: '',
    harea: '',
    htype: ''
  })

  //提交
  const submit = ()=>{
    let data = qs.stringify(saveHouse.value);
    console.log(data);
    axios.post(BASE_URL + '/v1/house/save', data)
        .then((response)=>{
          if (response.data.code == 2000){
            ElMessage.success('提交成功');
            saveHouse.value = {};
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }



  //查询房屋
  const loadHouse = ()=>{
    axios.get(BASE_URL + '/v1/house/select?hid=' + dialogId)
        .then((response)=>{
          if (response.data.code == 2000){
            saveHouse.value = response.data.data[0];
            console.log(saveHouse.value);
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }

  //返回
  const returnHouse = ()=>{
    window.history.go(-1);
  }
</script>


<style scoped>

</style>